<template>
  <div>
      <div class="wrapper">
        
       
        <div class="box1"><t-content><t-space direction="horizontal"  class="a">
         
          <t-image 
          shape="circle"
          src="/unhappy.png"
          :style="{ width: '80px', height: '80px', left:'-10px', top:'10px' }"
        /> 
        <t-image 
          shape="circle"
          src="/neutral.png"
          :style="{ width: '80px', height: '80px',left:'7px', top:'10px' }"/>
        <t-image
          shape="circle"
          src="/smile.png"
          :style="{ width: '90px', height: '80px', left:'20px',top:'10px' }"
        />
      </t-space>
      <div direction="vertical"><t-space></t-space></div>
      <div>
      <div>
        <t-space :size="10" class="a">
        <t-button  theme="success" shape="round" variant="base" size="middle" @click="dj1"  :style="active1" >Useful</t-button>
        <t-button theme="success" shape="round" variant="base" size="middle" @click="dj2"  :style="active2" >Effective</t-button>
        <t-button theme="success" shape="round" variant="base" size="middle" @click="dj3" :style="active3"  >Well-served</t-button>
      </t-space>
       </div>
       <div direction="vertical"><t-space></t-space></div>
       <div >
        <t-space :size="20" class="b">
          <t-button theme="success" shape="round" variant="base" size="middle" @click="dj4" :style="active4">Beautiful</t-button>
          <t-button theme="success" shape="round" variant="base" size="middle" @click="dj5" :style="active5">Easy-operating</t-button>
        </t-space>
       </div>
      </div>
       <div direction="vertical"><t-space></t-space></div>

       <t-space>
  <t-textarea 
    autofocus="true"
      class="juzhong"
      v-model="value3"
      placeholder="Please Leave Your Comments and Advice!"
      name="description"
      :autosize="{ minRows: 10, maxRows: 15}"/>
  </t-space>

    <div direction="vertical"><t-space></t-space></div>
<t-button theme="primary" shape="round" variant="base" size="middle" class="button" :style="{top:'-10px'}"  @click="visible2 = true">Submit</t-button>
<t-dialog
      v-model:visible="visible2"
      theme="success"
      header="Congratulation!"
      body="You have successfully submitted your feedback"
      :on-close="close2"
      :cancel-btn="null"
      @confirm="onClickConfirm"
    />
      </t-content> </div>
      <t-space class="c">   
        <div class="box2">
          <t-space direction="vertical" class="d">
            <h2>Need Help? Contact with us</h2>
            <t-space direction="horizontal">
    <t-icon  name="mail" size="large"/><t-input type="password"  autofocus="true" placeholder="Please input your e-mail here" auto-width="true" showClearIconOnEmpty>
    </t-input></t-space>

    <t-space direction="horizontal">
      <t-icon  name="call" size="large"/><t-input type="password"  autofocus="true" placeholder="Please input your phone number" auto-width="true" showClearIconOnEmpty/>
    </t-space>
    
    <t-space direction="vertical" class="e">
      <t-alert theme="info" title="Our Organization Location" message="South China Normal University, Foshan City Guangdong Province" :style="{height:'50px'}" >
    </t-alert>
      <!-- <t-alert theme="success" message="Our Organization Location: 
      Nanhai Campus, South China Normal University, Foshan City, Guangdong Province" /> -->
      <!-- <t-tooltip content="Our Organization Location" theme="success">
      <t-button theme="success" shape="round"> Nanhai Campus, South China Normal University, Foshan City, Guangdong Province</t-button>
    </t-tooltip> -->
    <t-image src="/切图.png"
          :style="{ width: '400px', height: '250px' }"></t-image>
        
        </t-space>
  </t-space>

        </div>
      </t-space>
      </div>
    
        <t-footer class ="t-footer"></t-footer>

  </div>
</template>

<script setup>

import { ref } from 'vue';

const active1 = ref('');
const active2 = ref('');
const active3 = ref('');
const active4 = ref('');
const active5 = ref('');

const dj1 = () => {
  active1.value = 'background-color: #2596be';
 
};

const dj2 = () => {
 
  active2.value = 'background-color: #2596be';
 
};

const dj3 = () => {
  
  active3.value = 'background-color: #2596be';
  
};

const dj4 = () => {

  active4.value = 'background-color: #2596be';
 ;
};

const dj5 = () => {
 
  active5.value = 'background-color: #2596be';
};

const visible2 = ref(false);

const onClickConfirm = (context) => {
  const { e } = context;

  visible2.value = false;

  e.stopPropagation();
};

const close2 = () => {
  visible2.value = false;
};

</script>
<style>
.about{
  height: 450px;
  width: 250px;
  background-color: rgb(245, 255, 250);
}
.left-icon{
  margin-left:auto
}
.logout-bottom
{
  margin-top: 200px;
}
.t-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.blank
{
  width: 960px;
  height: 600px;
}
.t-layout
{
  background-color: rgb(245, 255, 250);
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  width: 960px;
  
}
.a{ /*a,b,c,d,e皆为对齐方式*/ 
  margin-left:50px
}
.b{
  margin-left:80px
}
.c{
   margin-left: 30px
}
.d{
  margin-left: 60px;
  margin-top: 20px ;
}
.e{
  margin-left:-25px;
  width: 400px;
}
.box1 {
margin-top: 15px;
width: 400px;
height: 500px;
opacity: 1;
border-radius: 34px;
background: rgba(237, 241, 252, 0.58);
margin-left:30px 
  
}

.box2 {
  grid-row: 1/3;
  grid-column: 3;
  margin-top: 15px;
  width: 470px;
  height: 500px;
  opacity: 1;
  border-radius: 34px;
  background: rgba(237, 241, 252, 0.58);
  margin-right:200px;
}
.juzhong{
  margin-left:25px;
  width: 350px;
}
.button{
  margin-left:150px;
  width:100px;
  bottom: 60px;
}
.input{
   border-radius: 50rpx;
   background-color:crimson;
}
/* div{ border:3px solid rgb(239, 188, 188)} */
</style>


